<template>
<el-drawer title="在线用户排行" :visible.sync="isShow" custom-class="drawer_info" :before-close="visibleChange">
    <!-- <div class="num_title">
        <div></div>
        <div class="txt">所属公司</div>
        <div class="txt">在线人数</div>
        <div class="txt">在线率</div>
    </div>
    <ul class="num_box">
        <li v-for="(item,index) in visitNumList" :key="index">
            <div class="txt" :class="[index<3?'active':'']">{{index+1}}</div>
            <div class="txt">
                <el-tooltip class="item" effect="dark" :content='item.ncompanyName' placement="top">
                    <span>{{item.ncompanyName}}</span>
                </el-tooltip>
            </div>
            <div class="txt">{{item.num}}</div>
            <div class="txt">{{item.rate}}%</div>
        </li>
    </ul> -->
    <div class="content">
        <el-table
            :data="visitNumList"
            style="width: 100%">
            <el-table-column
                type="index"
                align="center"
                width="50">
                <template slot-scope="scope">
                    <p :class="[scope.$index<3?'active':'']">{{scope.$index+1}}</p>
                </template>
            </el-table-column>
            <el-table-column
                property="ncompanyName"
                show-overflow-tooltip
                align="center"
                label="所属公司">
            </el-table-column>
            <el-table-column
                property="num"
                label="在线人数"
                align="center"
                width="80">
            </el-table-column>
            <el-table-column
                property="rate"
                width="200"
                label="在线率">
                <template slot-scope="scope">
                    <div class="percent">
                        <el-progress :percentage="Number(scope.row.rate)" :stroke-width="12"></el-progress>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</el-drawer>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isShow: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.getVisitNum()
                    this.weixinComSendMessage()
                }
            },
        },
    },
    data() {
        return {
            visitNumList: []
        }
    },
    methods: {
        visibleChange() {
            this.$emit('visibleChange')
        },
        getVisitNum() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/getVisitNum`)
                .then((res) => {
                    if (res.data.code != '0000') {
                        return this.$message.error(res.data.msg)
                    }
                    this.visitNumList = res.data.data.visitMap
                    console.log(res)
                })
        },
        weixinComSendMessage() {
          const requestBody = {
            "touser": "@all",
            "toparty": "",
            "totag": "",
            "msgtype": "text",
            "text": {
              "content": "test"
            },
            "safe": 0,
            "enable_duplicate_check": 0,
            "duplicate_check_interval": 1800
          }
          this.$http.post(`${this.$ServiceName}/api/external/weixincommessagesender/send`, requestBody).then(resp => {
            if (resp.data.code !== '0000') {
              // this.$message.error(resp.data.msg)
              return
            }
            // this.$message.success(resp.data.msg)
          })
        },
    },
}
</script>

<style lang="less" scoped>
/deep/ .drawer_info{
    min-width:600px ;
}
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none
}
// .percent{
//     width:100%;
//     display: flex;
//     align-content: center;
// }
.content{
    width:100%;
    padding:0 10px;
}
/deep/.el-progress-bar{
    padding-right:70px!important;
    margin-right:-70px!important;
}
/deep/.el-progress__text{
    font-size: 14px!important;
}
/deep/.el-table th>.cell{
    text-align: center;
}
.active {
    border: 1px solid #A2E5FF;
    background: #DCF5FF;
    color: #006AB7;
    border-radius: 50%;
    width:25px;
    height:25px;
    line-height: 25px;
}
.num_title {
    display: flex;
    align-items: center;
    font-weight: 700;
    padding: 0 16px;
    div:nth-child(1) {
        width: 18px;
    }

    div:nth-child(2) {
        width:~"calc(100% - 178px)" 
    }
    div:nth-child(3) {
        width:80px;
    }
    div:nth-child(4) {
        width:80px;
    }

    // div+div {
    //     flex: 1;
    //     text-align: right;
    // }

}

.num_box {
    padding: 0 16px;

    li {
        display: flex;
        align-items: center;
        padding-right: 30px;

        div:nth-child(1) {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            font-size: 12px;
            color: #00003F;
            background: #F3F3F3;
            border: 1px solid #F0F0F0;
        }

        div:nth-child(2) {
            margin-left: 10px;
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: right;
            line-height: 34px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            width:~"calc(100% - 178px)" 
        }

        div:nth-child(3) {
            text-align: right;
            font-size: 14px;
            color: #909399;
            letter-spacing: 0;
            text-align: right;
            line-height: 34px;
            width:80px;
            // margin-right: 0;
        }

        div:nth-child(4) {
            text-align: right;
            font-size: 14px;
            color: #909399;
            letter-spacing: 0;
            text-align: right;
            line-height: 34px;
            width:80px;
            // margin-right: 0;
        }
    }
}
</style>
